<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增商店</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
    <style type="text/css">

        .login-container {
            border-radius: 10px;
            margin: 0px auto;
            width: 550px;
            padding: 15px 10px 5px 15px;
            background: #fff;
            /*border: 1px solid #eaeaea;*/
            text-align: left;
            /*box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);*/
        }

        .title {
            margin: 0px auto 40px auto;
            text-align: center;
            color: darkorange;
        }
        .el-form-item{
            margin-bottom: 10px;
        }
        #submit-button{
            background: #fff url("/button.png");
        }
        .el-tag + .el-tag {
            margin-left: 10px;
        }
        .button-new-tag {
            margin-left: 10px;
            height: 32px;
            line-height: 30px;
            padding-top: 0;
            padding-bottom: 0;
        }
        .input-new-tag {
            width: 90px;
            margin-left: 10px;
            vertical-align: bottom;
        }
    </style>
</head>
<body>
<div id="app">
    <el-form ref="shopForm" :model="shopForm" class="login-container" label-position="left" enctype="multipart/form-data">
        <h1 class="title" >新增店铺</h1>
        <el-form-item label="店铺名称">
            <el-input type="text" style="width: 250px" v-model="shopForm.name" placeholder="店铺名称"></el-input>
        </el-form-item>
        <el-form-item label="经营范围">
            <template>
                <el-tag
                        :key="tag"
                        v-for="tag in shopForm.typeList"
                        closable
                        :disable-transitions="false"
                        @close="handleClose(tag)">
                    {{tag}}
                </el-tag>
                <el-input
                        class="input-new-tag"
                        v-if="inputVisible"
                        v-model="inputValue"
                        ref="saveTagInput"
                        size="small"
                        @keyup.enter.native="handleInputConfirm"
                        @blur="handleInputConfirm"
                >
                </el-input>
                <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
            </template>
        </el-form-item>
        <el-form-item label="店铺详情">
            <el-input type="textarea" style="width: 250px" :rows="2" v-model="shopForm.detail" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="上传图片">
            <el-input v-if="false"></el-input>
            <el-upload
                    class="upload-demo"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    :on-change="onchange"
                    :auto-upload="false"
                    accept=".jpg,.png,.jpeg"
                    list-type="picture">
                <el-button size="small"  type="primary">选择文件</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2000kb</div>
<!--                <img v-if="shopForm.imageUrl" :src="shopForm.imageUrl" class="hidden">-->
            </el-upload>
        </el-form-item>
        <el-form-item>
            <el-button id="submit-button" @click="insert" style="width: 100%;">提交</el-button>
        </el-form-item>

    </el-form>
</div>
<script>
    new Vue({
        el: "#app"
        ,
        data() {
            return {
                shopForm: {
                    name: '',
                    detail: '',
                    imageUrl:'',
                    typeList: []
                }
                ,
                inputVisible: false,
                inputValue: ''
                ,
                fileList:[]
                ,
                formdata:{}
                ,
            }
        }
        ,
        methods: {
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            }
            ,
            onchange(file,fileList){
                if (fileList.length > 1) {
                    fileList.splice(0, 1)
                }
                this.shopForm.imageUrl = file.raw
                console.log(this.shopForm.imageUrl)
                console.log(file.raw.type)
                const isJPG = file.raw.type === 'image/jpeg';
                const isPNG = file.raw.type === 'image/png';
                const isLt2000K = file.size / 1024 < 2000;
                if (!isPNG&&!isJPG) {
                    console.log("不是图片")
                    this.$message.error('上传图片只能是JPG或者PNG格式！')
                    this.shopForm.imageUrl = '';
                    fileList.splice(0, 1);
                }
                if (!isLt2000K) {
                    this.$message.error("上传图片不能超过2000K！")
                    this.shopForm.imageUrl = '';
                    fileList.splice(0, 1);
                }
            }

            ,
            insert(){
                // console.log(this.shopForm.name)
                let format = new FormData()
                format.append("name",this.shopForm.name)
                format.append("detail",this.shopForm.detail)
                format.append("typeList",this.shopForm.typeList)
                format.append("imageUrl",this.shopForm.imageUrl)
                this.formdata = format
                console.log(this.formdata.get("name"))
                $.ajax({
                    url:'/shop/insert',
                    type:'post',
                    data: format,
                    processData: false, // 告诉jQuery不要去处理发送的数据
                    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                    success:function (data) {
                        if(data==="ok") {
                            alert("添加成功")
                            location.href="Myshop.html"
                        }else {
                            alert("您已有该名称的店铺")
                        }
                    }


                })

            }
            ,
            handleClose(tag) {
                this.shopForm.typeList.splice(this.shopForm.typeList.indexOf(tag), 1);
            },

            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                    this.$refs.saveTagInput.$refs.input.focus();
                });
            },

            handleInputConfirm() {
                let inputValue = this.inputValue;
                if (inputValue) {
                    this.shopForm.typeList.push(inputValue);
                }
                this.inputVisible = false;
                this.inputValue = '';
            }

        }
    });
</script>
</body>
</html>